<template>
	<view class="question2">
		<view class="top">
			<image src="/static/icon/white-back.png" @tap="nav" />
			<view>{{ title || '售后' }}</view>
		</view>
		<view class="bg1"></view>
		<view class="question2_item box1">
			<view class="title">
				问题描述
				<text style="color: red;">*</text>
			</view>
			<textarea class="textarea" auto-height maxlength="120" @input="changeInput"></textarea>
			<view class="num">{{ num }}/120</view>
		</view>
		<view class="question2_item box2">
			<view class="title">
				<view>添加图片</view>
			</view>
			<view class="item_image">
				<view class="item" v-for="(item, index) in images" :key="index">
					<image class="image3" :src="item + '?imageView2/1/w/400/h/400'"></image>
					<view class="Delimage2" @tap.stop="Delimage(index)">×</view>
				</view>
				<view class="image2" @tap="changeImg" v-if="images.length < 5"><image src="/static/icon/add2.png"></image></view>
			</view>
		</view>
		<button class="button" @tap="question">提交</button>
	</view>
</template>

<script>
import qiniuUpload from '@/common/qiniuUpload.js';
export default {
	data() {
		return {
			images: [],
			title: '',
			num: 0,
			desc:'',
			handle_style:'',
			id:''
		};
	},
	onLoad(e) {
		this.id = e.id
		this.title = e.title;
		this.handle_style = e.type
	},
	methods: {
		nav() {
			uni.navigateBack();
		},
		Delimage(e) {
			this.images.splice(e, 1);
		},
		changeInput(e) {
			this.desc = e.detail.value
			this.num = e.detail.cursor;
		},
		async changeImg(show) {
			/**
			 * 获取七牛云图片链接
			 */
			let [_chooseImage, chooseImage] = await uni.chooseImage({ count: 1 });
			if (_chooseImage) {
				return;
			}
			let images = chooseImage.tempFilePaths[0];
			let key = 'question:' + new Date().getTime() + '.png'; //图片名称
			let qiniuImg = await this.qiniuUpload(images, key);
			this.images.push(qiniuImg.imageURL);
		},
		question(){
			if(!this.desc){
				this.showToast('请填写问题描述')
				return;
			}
			if(this.images.length < 1){
				this.showToast('请上传照片')
				return;
			}
			this.getReq({
				url:'both/feedback',
				method:'post',
				data:{
					order_id:this.id,
					feed_id:this.isLogin().id,
					desc:this.desc,
					image:this.images,
					handle_style:this.handle_style
				}
			}).then(data=>{
				let [err,res] = data
				if(err||res.data.status == 0){
					this.showToast(res.data.message);
					return;
				}
				this.showToast(res.data.title);
				setTimeout(()=>{
					uni.navigateBack({
						delta: 9
					});
				},1500)
			})
		}
	}
};
</script>

<style scoped lang="scss">
.question2 {
	color: #333333;
	min-height: 100vh;
	background-color: #f8f8f8;
	.top {
		width: 750upx;
		padding-top: var(--status-bar-height);
		height: 86upx;
		background-color: #3595f9;
		position: fixed;
		left: 0;
		top: 0;
		font-size: 36upx;
		color: #fff;
		text-align: center;
		line-height: 86upx;
		image {
			position: absolute;
			width: 32upx;
			height: 32upx;
			left: 27upx;
			bottom: 27upx;
		}
	}
	.bg1 {
		width: 100%;
		padding-top: var(--status-bar-height);
		height: 86upx;
	}
	.question2_item {
		background-color: #fff;
		width: 702upx;
		padding: 0 24upx;
		.title {
			padding: 50upx 0 30upx 0;
			font-size: 32upx;
			line-height: 1;
		}
	}
	.box1 {
		position: relative;
		.textarea {
			width: 654upx;
			min-height: 118upx;
			background-color: #f8f8f8;
			border-radius: 8upx;
			border: solid 1upx #f8f8f8;
			font-size: 28upx;
			line-height: 1.5em;
			padding: 24upx;
			color: #999;
			padding-bottom: 70upx;
		}
		.num {
			position: absolute;
			right: 48upx;
			bottom: 24upx;
			font-size: 28upx;
			color: #999;
		}
	}
	.box2 {
		.title {
			padding: 50upx 0 30upx 0;
			font-size: 32upx;
			line-height: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.item_image {
			min-height: 212upx;
			background-color: #fff;
			display: flex;
			flex-wrap: wrap;
			.item {
				position: relative;
				width: 180upx;
				height: 180upx;
				border-radius: 8px;
				margin: 0 50upx 30upx 0;
				.image3 {
					width: 180upx;
					height: 180upx;
				}
				.Delimage2 {
					position: absolute;
					right: -25upx;
					top: -20upx;
					width: 40upx;
					height: 40upx;
					font-size: 33upx;
					text-align: center;
					line-height: 40upx;
					border-radius: 50%;
					color: #fff;
					background-color: rgba(0, 0, 0, 0.5);
				}
			}
			.image2 {
				width: 180upx;
				height: 180upx;
				margin: 0 50upx 30upx 0;
				border-radius: 8px;
				border: 2upx solid #e5e5e5;
				position: relative;
				image {
					width: 80upx;
					height: 80upx;
					position: absolute;
					left: 50upx;
					top: 50upx;
				}
			}
		}
	}
	.button {
		width: 540upx;
		height: 90upx;
		background-color: #3595f9;
		border-radius: 8upx;
		font-size: 32upx;
		color: #ffffff;
		margin-top: 140upx;
	}
}
</style>
